// 在顶部插入一个可以移动的dom
export const initTopDrag = () => {
  const topDiv = document.createElement("div") // 创建节点
  topDiv.style.position = "fixed" // 一直在顶部
  topDiv.style.top = "0"
  topDiv.style.left = "0"
  topDiv.style.height = "20px" // 顶部20px才可拖动
  topDiv.style.width = "100%" // 宽度100%
  topDiv.style.zIndex = "9999" // 悬浮于最外层
  topDiv.style.pointerEvents = "none" // 用于点击穿透
  // @ts-ignore
  topDiv.style["-webkit-user-select"] = "none" // 禁止选择文字
  // @ts-ignore
  topDiv.style["-webkit-app-region"] = "drag" // 拖动
  document.body.appendChild(topDiv) // 添加节点
}

export const ripple = (el, binding) => {
  console.log(el)
  el.classList.add("ripple")
  // 添加点击事件
  el.addEventListener("click", (e) => {
    console.log(e.target)
    if (e.target.className !== "piece") {
      return
    }
    console.log(e.target.offsetLeft, e.target.offsetTop)
    let createDiv = document.createElement("div")
    createDiv.className = "ripple-div rippling"
    let maxHW = Math.max(e.target.offsetWidth, e.target.offsetHeight)
    createDiv.style.width = `${maxHW}px`
    createDiv.style.height = `${maxHW}px`
    // 动态设置动画时间，容器越大，动画时间越长
    createDiv.style.animation = `rippleAnima ${2}s linear`
    // 重新计算水波纹的中心位置
    createDiv.style.top = `${e.target.offsetTop}px`
    createDiv.style.left = `${e.target.offsetLeft}px`
    // 追加到元素中
    el.appendChild(createDiv)
    setTimeout(() => {
      // 删除元素
      el.removeChild(createDiv)
    }, 2000)
  })
}
